<template>
  <div class="xd-bounty-wrapper">
    <div class="top-msg-tip">
      <span>您有10.20元售后津贴，前往立即领取吧～</span>
      <div
        style="display: flex; align-items: center"
        @click="showDialog = true"
      >
        立即领取<img src="../../assets/bounty/arrow.png" />
      </div>
    </div>
    <div class="bounty-calculate-wrap">
      <div class="total-bounty-wrap">
        <div class="bounty-label">已累计获得奖励金 (元)</div>
        <div class="bounty-amount">2280.00</div>
      </div>
      <div style="display: flex; align-items: center;">
        <div class="enable-bounty-wrap">
          <span>可用奖励金 (元)</span>
          <span class="amount">923230.00</span>
        </div>
        <div class="divide"></div>
        <div class="disable-bounty-wrap">
          <span>冻结奖励金 (元)</span>
          <span class="amount">923230.00</span>
        </div>
      </div>
    </div>
    <div class="list-wrapper" ref="ss">
      <div class="list-nav-wrap" style="position: relative;">
        <div class="list-nav">
          <span style="color: #999">奖励金明细</span>
          <div @click="handleMenuClick" class="drop-menu-text">
            <span style="color: #333">{{ menuText }}</span>
            <img
              src="../../assets/bounty/icon-drop-down.png"
              v-if="!showDropMenu"
            />
            <img src="../../assets/bounty/icon-drop-up.png" v-else />
          </div>
        </div>
        <div
          class="dropdown-content"
          :style="{ height: height + 'px' }"
          v-show="showDropMenu"
        >
          <ul style="background-color: #fff; padding: 0 0.24rem;">
            <li
              v-for="menuItem in option"
              :key="menuItem.menuId"
              @click="selectMenu(menuItem.menuId)"
            >
              <span :class="{ active: selectedMenuId === menuItem.menuId }">
                {{ menuItem.text }}
              </span>
              <img
                src="../../assets/bounty/icon-selected.png"
                class="select-status"
                v-if="selectedMenuId === menuItem.menuId"
              />
            </li>
          </ul>
        </div>
      </div>
      <div class="no-data-wrapper" style="display: none">
        <div class="no-data-content">
          <img src="../../assets/bounty/icon-no-data.png" />
          <p>暂无相关明细</p>
        </div>
      </div>
      <van-pull-refresh
        v-model="isRefreshing"
        @refresh="onRefresh"
        style="flex: 1"
      >
        <van-list
          v-model="isLoading"
          :finished="finished"
          loading-text="努力加载中..."
          :immediate-check="false"
          :finished-text="tip"
          :offset="offset"
          @load="onLoad"
          style="height: 100%"
        >
          <ul v-if="listData.length > 0" class="list-content-wrapper">
            <li
              class="list-item-wrap"
              v-for="(item, index) in listData"
              :key="index"
            >
              <div class="flex">
                <span class="bounty-type">{{ item.bountyType }}</span>
                <span class="amount-text">{{ item.amountText }}</span>
              </div>
              <div class="flex">
                <span style="color: #999999">{{ item.reason }}</span>
                <span class="time">{{ item.time }}</span>
              </div>
            </li>
          </ul>
        </van-list>
      </van-pull-refresh>
    </div>
    <van-popup v-model="showDialog">
      <div class="dialog-wrap">
        <div class="close-wrap">
          <img
            src="../../assets/bounty/icon-selected.png"
            @click="showDialog = false"
          />
        </div>
        <div class="title">售后津贴领取</div>
        <div class="dialog-content">
          您有<span style="color: #E62525">{{ allowanceAmount }}元</span
          >售后津贴可转入至奖励金，快去一键转入
        </div>
        <div class="footer">
          <div class="btn left">查看详情</div>
          <div class="divide"></div>
          <div class="btn right">一键转入</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'bounty',
  data() {
    return {
      showDialog: false,
      height: 0,
      selectedMenuId: 0,
      isRefreshing: false, // 下拉刷新
      isLoading: false, // 上拉加载
      finished: false, // 上拉加载完毕
      offset: 10, // 滚动条与底部距离小于 offset 时触发load事件
      tip: '我是有底线的',
      pageNum: 1,
      pageSize: 10,
      isRequesting: false,
      option: [
        { text: '全部', menuId: 0 },
        { text: '奖励发放', menuId: 1 },
        { text: '奖励金抵扣', menuId: 2 },
        { text: '订单补偿', menuId: 3 },
        { text: '订单退款', menuId: 4 },
        { text: '其他', menuId: 5 },
        { text: '其他2', menuId: 6 },
        { text: '其他3', menuId: 7 }
      ],
      listData: [],
      showDropMenu: false,
      allowanceAmount: 100
    };
  },
  computed: {
    menuText() {
      return this.option.find(item => item.menuId === this.selectedMenuId).text;
    }
  },
  methods: {
    handleMenuClick() {
      this.showDropMenu = !this.showDropMenu;
      const rect = document.querySelector('.list-nav').getBoundingClientRect();
      const { clientHeight } = document.body;
      console.log('height===', rect);
      const height = clientHeight - rect.bottom;
      this.height = height;
      if (this.showDropMenu) {
        document.documentElement.style.overflow = 'hidden';
        document.body.style.overflow = 'hidden';
      } else {
        document.documentElement.style.overflow = '';
        document.body.style.overflow = '';
      }
    },
    selectMenu(val) {
      this.selectedMenuId = val;
      this.showDropMenu = false;
    },
    onRefresh() {
      this.pageNum = 1;
      this.getData();
    },
    onLoad() {
      if (this.listData.length === 0 || this.isRequesting) {
        this.isLoading = false;
        return;
      }
      this.getData();
    },
    getData() {
      this.isRequesting = true;
      setTimeout(() => {
        const arr = [];
        let i = (this.pageNum - 1) * 10;
        let len = this.pageNum * 10;
        for (i; i < len; i++) {
          arr.push({
            id: i + 1,
            bountyType: '订单退款' + i,
            amountText: '+15',
            reason: '订单退款',
            time: '2019-06-10'
          });
        }

        if (this.pageNum === 1) {
          this.listData = arr;
        } else {
          this.listData = this.listData.concat(arr);
        }
        this.pageNum++;
        this.isLoading = false;
        this.isRefreshing = false;
        this.isRequesting = false;
      }, 1000);
    }
  },
  mounted() {
    this.getData();
  }
};
</script>

<style lang="scss">
.xd-bounty-wrapper {
  background: #f5f5f5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  .top-msg-tip {
    height: 0.8rem;
    font-size: 0.26rem;
    background: #fef8ef;
    color: #ff6a0d;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 0.28rem;
    padding-right: 0.14rem;

    img {
      width: 0.12rem;
      height: 0.2rem;
      margin-left: 0.1rem;
    }
  }
  .bounty-calculate-wrap {
    height: 3.54rem;
    background: #fff;
    margin-bottom: 0.2rem;

    .total-bounty-wrap {
      padding-top: 0.64rem;
      padding-bottom: 0.58rem;

      .bounty-label {
        font-size: 0.26rem;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        text-align: center;
      }
      .bounty-amount {
        font-size: 0.64rem;
        font-weight: bold;
        color: rgba(230, 37, 37, 1);
        text-align: center;
      }
    }
    .enable-bounty-wrap,
    .disable-bounty-wrap {
      flex: 1;
      span {
        font-size: 0.24rem;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
        display: block;
        text-align: center;
      }
      .amount {
        font-size: 0.34rem;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
      }
    }
    .divide {
      height: 0.48rem;
      border: 1px dashed #eeeeee;
    }
  }
  .list-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    .list-nav-wrap {
      background: rgba(255, 255, 255, 1);
      font-size: 0.26rem;
      position: relative;

      .list-nav {
        height: 0.92rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.24rem;
        font-weight: 400;

        .drop-menu-text {
          display: flex;
          align-items: center;
          img {
            width: 0.22rem;
            heigh: 00.8rem;
            vertical-align: center;
            margin-left: 0.1rem;
          }
        }
      }

      .dropdown-content {
        position: absolute;
        top: 45px;
        left: 0;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: block;
        z-index: 1010;
        overflow: auto;
        /*transition: all 2s;*/

        ul {
          color: #333;
          font-weight: 400;
          font-size: 0.28rem;

          li {
            height: 0.88rem;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .active {
              color: #e62525;
            }

            .select-status {
              width: 0.28rem;
              height: 0.28rem;
            }
          }
        }
      }
    }

    .no-data-wrapper {
      font-size: 0.24rem;
      flex: 1;
      display: flex;
      align-items: center;
      .no-data-content {
        text-align: center;
        flex: 1;
        img {
          width: 1.38rem;
          height: 1.38rem;
        }

        p {
          font-size: 0.24rem;
          color: #999;
          text-align: center;
        }
      }
    }

    .list-content-wrapper {
      .list-item-wrap {
        border-bottom: 1px solid #f0f0f0;
        background: #fff;
        padding: 0.24rem;
      }
      .flex {
        font-size: 12px;
        display: flex;
        justify-content: space-between;
      }
      .bounty-type {
        font-size: 0.28rem;
        font-weight: 400;
        color: #333333;
      }

      .amount-text {
        font-size: 0.36rem;
        font-weight: bold;
        color: rgba(230, 37, 37, 1);
      }
      .time {
        font-size: 0.2rem;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
      }
    }
  }

  .dialog-wrap {
    width: 5.5rem;
    background-color: #fff;
    border-radius: 5px;
    font-size: 0.28rem;

    .close-wrap {
      display: flex;
      justify-content: flex-end;
      img {
        width: 0.24rem;
        height: 0.24rem;
        padding: 0.24rem 0.24rem 0 0;
      }
    }
    .title {
      font-size: 0.32rem;
      text-align: center;
      color: #333;
      font-weight: 500;
    }

    .dialog-content {
      width: 4.5rem;
      margin: 0.2rem auto;
      font-size: 0.28rem;
      color: #666666;
      text-align: center;
    }

    .footer {
      height: 0.9rem;
      display: flex;
      border-top: 1px solid #eeeeee;

      .divide {
        height: 100%;
        width: 1px;
        background-color: #eeeeee;
      }
      .btn {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 400;
        font-size: 0.28rem;
      }
      .left {
        color: #666;
      }
      .right {
        color: #333;
        font-weight: 500;
      }
    }
  }

  .van-popup {
    background-color: transparent;
  }
}
</style>
